<template>
  <div class="page">
    <navigation>{{ $t('身份认证') }}</navigation>
    <div class="page-space"></div>
    <div class="page-main">
      <div v-if="verified_status === 0" class="form">
        <psersonForm/>
      </div>
      <div v-else-if="verified_status === 1" class="audit-status">
        <img class="auditing-img" src="@/assets/images/auditing.svg" alt="">
        <div class="auditing-text">{{ $t('认证审核中，请耐心等待') }}</div>
      </div>
      <div v-else-if="verified_status === 2" class="audit-status">
        <img class="auditing-img" src="@/assets/images/audit-ok.svg" alt="">
        <div class="auditing-text">{{ $t('认证成功') }}</div>
      </div>
      <div v-else-if="verified_status === 3" class="audit-status">
        <img class="auditing-img" src="@/assets/images/audit-failure.svg" alt="">
        <div class="auditing-text">{{ $t('认证失败') }}</div>
        <div class="btn-repost" @click="resetAuth">{{ $t('重新提交') }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import navigation from '@/components/Navigation.vue'
import psersonForm from '@/components/partials/user/certification/PersonForm'
export default {
  components: { navigation, psersonForm },
  data () {
    return {
      verified_status: 0
    }
  },
  computed: {
    ...mapState({
      auth: ({ auth }) => auth
    })
  },
  mounted () {
    this.verified_status = this.auth.user.verified_status
  },
  methods: {
    ...mapActions({
      getUserInfo: 'auth/getUserInfo',
      authResetPerson: 'auth/authResetPerson'
    }),
    resetAuth () {
      this.verified_status = 0
    }
  },
  head () {
    return {
      title: this.$t('身份证认证')
    }
  }
}
</script>
<style scoped>
.audit-status {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.audit-status.hide {
  display: none;
}
.auditing-img {
  width: 25%;
  height: 25%;
}
.auditing-text {
  margin-top: 20px;
  font-size: 16px;
  color: #999;
}
.btn-repost {
  margin-top: 40px;
  width: 160px;
  height: 40px;
  line-height: 40px;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

</style>
